<template>
	<div class="column"  @contextmenu.prevent='rightclick(item)' @mouseleave ='onmouseover'>
		<el-tag :type="item.status == '00'?'success':item.status == '01'?'warning':item.status == '02'?'':item.status == '05'?'danger':item.status == '04'?'success':item.status == '06'?'warning':'warning'" class="column-more-status" v-if="item.docType=='05'" >{{item.status|statusfilters}}</el-tag>
		<!-- <el-tag class="column-more-status" v-if="item.docType=='05'" >{{item.status|statusfilters}}</el-tag> -->
		<div class="column-more" v-if="listQuery.isUpdate != 1">
			<folderPopover  documentType='合同' :functionIndex="functionIndex" :projType='projType' :treeData="item" :listQuery="listQuery"></folderPopover>
			 <folderPopoverTWO ref="folderPopover" :projType='projType' :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopoverTWO>
		</div>
		<div class="column-img" >
			<el-image style="width: 100%;height: 100%;" :src="fileImg"></el-image>
		</div>
		<span class="column-title">{{item.name}}</span>
	</div>
</template>

<script>
	import folderPopover from '../../document/components/folderPopover'
	import folderPopoverTWO from "../../document/components/folderPopoverTWo.vue"
	export default{
		data(){
			return{
				projType:true,
				folderImg:require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
				fileImg:require("../../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
			}
		},
		components:{
			folderPopover,folderPopoverTWO
		},
		filters: {
			statusfilters(val){
      		if(val=='00'){return '已上传'}
      		else if(val=='01'){return '待审批'}
      		else if(val=='02'){return '审批中'}
      		else if(val=='05'){return '已驳回'}
      		else if(val=='04'){return '已审批'}
      		else if(val=='06'){return '已过期'}
      		else if(val=='07'){return '已作废'}
			}
    	}, 
		props:['item','listQuery','functionIndex'],
		methods:{
			// 预览文档
		rightclick(data){
            console.log(data);
             this.$refs.folderPopover.visibletypechang()
        },
        onmouseover(){
			    if(this.item.type=='doc'){
                this.$refs.folderPopover.visibletypechangonmouseover()
            }
            //  this.$refs.folderPopover.visibletypechangonmouseover()
        },
			documentClick(item){
				var _this = this
				// if(item.type == 'file-pdf'){
				// 	window.open(item.filePath, '_system') //url为访问的地址
				// }else{
				// 	window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
				// }
			},
		}
	}
</script>

<style scoped>
	.column {
		position: relative;
		width: 130px;
		height: 160px;
		border: 1px solid #e3e9ed;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
.column:hover{
    background-color: rgb(236,245,255)
}
	.column-more {
		position: absolute;
		right: 0;
		top: 0;
		padding: 10px 12px;
	}

	.column-more-icon{
		font-size: 12px;
		color: #2e405e;
	}

	.column-img{
		width: 70px;
		height: 70px;
		cursor: pointer;
	}

	.column-title{
		padding: 0 10px;
	    width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #2e405e;
		font-size: 12px;
		margin-top: 12px;
		text-align: center;
		cursor: pointer;
	}

	.column-title:hover{
		color: #2C7EF8;

	}
		.column-more-status{
		position: absolute;
		left: 6px;
		top: 6px;
	}
</style>
